import dash_bootstrap_components as dbc
from dash import html, Input, Output, callback

accordion_html = html.Div([
    html.Br(),
    html.P(html.Strong('使用Accordion组件创建可折叠列表', style={'color': 'rgb(255, 153, 51)'})),
    html.Br(),
    dbc.Accordion(
        [
            dbc.AccordionItem(
                [
                    html.P("这是项目一里面的内容"),
                    dbc.Button("可点击按钮"),
                ],
                title="项目一",
                item_id='项目一的ItemId'
            ),
            dbc.AccordionItem(
                [
                    html.P("这是项目二里面的内容"),
                    dbc.Button("不可点击按钮", color="danger"),
                ],
                title="项目二",
                item_id='项目二的ItemId',
            ),
            dbc.AccordionItem("这是项目一里面的内容", title="项目三", item_id='项目三的ItemId'),
        ],
        id='accordion_always_open',
        always_open=True, # 可以使accordion items在另一个item打开时保持打开状态。
    ),
    html.Div(id='accordion_contents_open_ids', className='mt-3')
])

@callback(
    Output('accordion_contents_open_ids', 'children'),
    # active_item当前活动项的item_id，参数为字符串或列表。如果没有为活动项目指定item_id，则默认为item-i，
    # 其中i是项目的索引(从0开始)。如果always_open=True，这需要是一个字符串id列表。
    [Input('accordion_always_open', 'active_item')]
)
def change_item(item):
    return f'当前选择的Item={item}'